// 类型选择组件
<template>

<div class="check-kind" @click='check'>

    <transition name='scale'>
        <div class="status" v-if='currentValue'>
            <c-btn-icon :icon='"icon-complete"'  :type='"primary"'></c-btn-icon>
        </div>
    </transition>

    <div class="container">

        <div class="img">
            <img :src="img" alt="">
        </div>

        <h1 class="title">
            {{title}}
        </h1>

    </div>

</div>
    
</template>

<script lang='ts'>
import {Component, Prop, Watch, Vue} from 'vue-property-decorator'

@Component({})
export default class checkKind extends Vue{
    name:string ='check-kind'

    @Prop({
        default: true
    })
    value:boolean
    
    @Prop()
    title:string
    
    @Prop()
    img:string

    @Prop(
        {
            default: false
        }
    )
    disabled:boolean


    currentValue:boolean = this.value

    @Watch('value')
    onValueChange(newVal, oldVal){
        this.currentValue = newVal;
    }

    get className(){
        let name = [];
        
        if(this.currentValue){
            name.push('checked');
        }

        return name
    }

    check(){

        if(this.disabled){return}
        
        this.currentValue = !this.currentValue;
        
        this.$emit('check', this.currentValue);
        this.$emit('input',  this.currentValue);
        
    }


}


</script>

<style scoped lang='scss'>

$h: _rem(36px);
.check-kind{
    
    position: relative;
    height: $h;
    cursor: default;
    transition: all $transition_time;


    &:hover{

    }

    .status{
        position: absolute;
        top: _rem(-10px);
        right: _rem(-14px);
        z-index: 9;
    }

    .container{ 
        
        overflow: hidden;
        display: flex;
        height: $h;
        border-radius: $border_radius; 
        box-shadow: $default_shadow;
        background: #fff;
        line-height: $h;

        .img{
            @extend %img_box;            
            flex: 0  $h;
            align-items: center;
            width: $h;
        }
        
        .title{
            @extend %text_overflow;
            margin-left: _rem(4px);
            padding-right: _rem(6px);
            font-size: $font_small;
            font-weight: 400;
            
        }

        
    }
    
}



</style>